<template>
  <div>
    <el-dialog width=""
               :title="innerDialogTit"
               :visible.sync="showAddDevice"
               @close="dialogClose">
      <div class="device-dialog flex jcb fww">
        <div class="item por ovh mb10 bsb"
             v-for="(item, i) in deviceList"
             :key="i">
          <img v-if="!add"
               :src="item.model_icon"
               alt=""
               class="img vam w100"
               @click="selDevice(item)">
          <img :src="item.model_icon"
               alt=""
               class="img vam w100">
          <div v-if="add"
               class="poa btns r0 t0 transition zi1">
            <el-button type="text"
                       class="el-icon-edit"
                       @click="editDevice(item)"></el-button>
            <el-button type="text"
                       class="el-icon-delete"
                       @click="delDevice(item)"></el-button>
          </div>
          <div v-else
               class="poa r0 t0 transition zi1"
               style="display:inline-block;right: 5px;line-height: 1;">
            <el-button v-if="item.show"
                       type="text"
                       class="el-icon-success"></el-button>
          </div>
          <div class="poa b0 l0 w100 title zi1 tac">{{item.model_name}}</div>
        </div>
        <div class="item por el-icon-plus add-item tac bsb csp fs24"
             @click="editDevice()"></div>
        <template v-if="(deviceList.length + 1) % 4">
          <div class="item bsb"
               v-for="e in 4 - (deviceList.length + 1) % 4"></div>
        </template>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="showAddDevice = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog width=""
               :title="editDeviceForm.model_id ? '修改设备' : '新增设备'"
               :visible.sync="editDeviceInner">
      <gl-form class=""
               ref="deviForm"
               must="model_name,model_data_list"
               :form="editDeviceForm"
               @upload="upload"
               :form-label="editDeviceLabel">
        <div class=""
             slot="someProp">
          <div class="mb10"
               v-for="(device, d) in editDeviceForm.model_data_list"
               :key="i">
            <el-input class="w33"
                      v-model="device.key_name"></el-input>
            :
            <el-input class="w33"
                      v-model="device.value"></el-input>
            <el-button type="text"
                       class="el-icon-close ml20"
                       @click="editDeviceForm.model_data_list.splice(d, 1)"></el-button>
          </div>
          <el-button type="primary"
                     class="el-icon-plus"
                     size="small"
                     @click="editDeviceForm.model_data_list.push({})">
            添加设备参数项
          </el-button>
        </div>
      </gl-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="editDeviceInner = false">取 消</el-button>
        <el-button type="primary"
                   @click="editDeviceSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'decive',
  computed: {
    ...mapGetters(['userInfo'])
  },
  props: {
    product_id: {
      type: String,
      default() {
        return ''
      }
    },
    customer_id: {
      type: String,
      default() {
        return ''
      }
    },
    innerDialogTit: {
      type: String,
      default() {
        return '设备管理'
      }
    },
    showAddDevice: {
      //第一层dialog
      type: Boolean,
      default: true
    },
    editDeviceInner: {
      //第二层dialog
      type: Boolean,
      default: false
    },
    add: {
      // 区分是 产品/客户 ，默认 客户进
      type: Boolean,
      default: true
    },
    deviceList: {
      // 设备列表
      type: Array,
      default() {
        return []
      }
    },
    chooseList: {
      // 所选列表
      type: Array,
      default() {
        return []
      }
    },
    editDeviceForm: {
      type: Object,
      default() {
        return {
          fileIcon: []
        }
      }
    },
    editDeviceLabel: {
      type: Array,
      default() {
        return [
          { label: '设备名称', prop: 'model_name' },
          { label: '图片', prop: 'fileIcon', type: 'upload',limit:'1' },
          { label: '设置参数', slot: 'someProp', prop: 'model_data_list' },
          { label: '备注', prop: 'remark', rows: 3, text: 'ueditor' }
        ]
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    deviceList(val) {
      if (val) {
        this.chooseList.map(e => {
          this.deviceList.map(item => {
            if (item.model_id == e.model_id) {
              item.show = true
            }
          })
        })
      } else {
        this.deviceList.map(item => {
          item.show = false
        })
      }
    }
  },
  created() {},
  methods: {
    upload(res, prop) {
    //   console.log(res)
      this.editDeviceForm.savepath = res.savepath
    },
    dialogClose() {
      this.$emit('dialogClose')
    },
    submit() {
      let temp = []
      this.deviceList.map(e => {
        if (e.show == true) {
          temp.push({ model_id: e.model_id, app_id: e.app_id })
        }
      })
      this.chooseList.splice(0, this.chooseList.length, ...temp)

      //   console.log(this.deviceList)
      //   console.log(this.chooseList)
      //   return
      this.http
        .$post('admin/product.api/pro_update_model', {
          product_id: this.product_id,
          model_ids: this.chooseList
        })
        .then(r => {
          this.$emit('success')
          this.showAddDevice = false
        })
        .catch(this.$err)
    },
    editDeviceSure() {
      if (this.$refs.deviForm.validate()) {
        let url = 'admin/device.Api/device_add'
        let params = { ...this.editDeviceForm }
        if (params.model_id) {
          url = 'admin/device.Api/device_edit'
        }
        params.customer_id =
          params.customer_id || this.$route.params.id || this.customer_id
        params.list = params.model_data_list
        params.model_icon = params.savepath
        this.http
          .$post(url, params)
          .then(res => {
            this.$message.success(
              this.editDeviceForm.model_id ? '修改成功' : '添加成功'
            )
            this.getdecive(!this.editDeviceForm.model_id)
            this.editDeviceInner = false
          })
          .catch(this.$err)
      } else {
        return this.$message.error('请确认输入是否完整无误')
      }
    },
    editDevice(row) {
      if (row) {
        row = { ...row }
        row.model_data_list = [...row.model_data_list]
        row.file_path = row.model_icon
      } else {
        row = {
          model_data_list: [],
          file_path: ''
        }
      }
      let label = this.editDeviceLabel.find(e => e.type === 'upload')
      label.res = row
      this.editDeviceForm = row
      this.editDeviceInner = true
      this.$refs.deviForm && this.$refs.deviForm.clearValidate()
    },
    delDevice(row) {
      this.$confirm('确定删除该设备？', '提示')
        .then(res => {
          this.http
            .$post('admin/device.Api/device_del', {
              model_id: row.model_id,
              status: 2
            })
            .then(r => {
              this.$message.success('删除成功')
              //   this.getDeviceList()
            })
            .catch(this.$err)
        })
        .catch(console.log)
      //   this.$emit('delDevice', row)
    },
    getdecive(add) {
      this.http
        .$post('admin/device.Api/device', {
          customer_id: this.customer_id,
          product_id: this.product_id,
          limits: 9999
        })
        .then(r => {
          //   console.log(r)
          this.deviceList = r.list.map(e => ({ show: false, ...e }))
          if (add) {
            this.deviceList[this.deviceList.length - 1].show = true
          }
        })
        .catch(this.$err)
    },
    selDevice(row) {
      row.show = !row.show
    }
  }
}
</script>
<style lang="less" scoped>
.device-dialog {
  .img {
    max-height: 100%;
  }
  .title {
    line-height: 2;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
  }
  .item {
    width: 150px;
    height: 150px;
    line-height: 150px;
    border: 1px #ddd solid;
    &:hover {
      .btns {
        transform: translateY(0);
      }
    }
  }
  .add-item {
    border-radius: 5px;
    & ~ .item {
      border: 0;
    }
  }
  .btns {
    right: 5px;
    line-height: 1;
    transform: translateY(-100%);
  }
  .el-button {
    padding: 0;
    line-height: 1.5;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>